<template>
  <view class="h-dialog" v-if="show">
    <view class="h-dialog-mask" @tap="handleMaskClose"></view>
    <view class='h-dialog-content' :style="{width: width, height: height}">
      <view v-if="showClose" class="h-close" @tap="handleClose">X</view>
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'hDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    maskClose: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '80%'
    },
    height: {
      type: String,
      default: '350rpx'
    }
  },
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = this.value
  },
  methods: {
    handleMaskClose() {
      if(this.maskClose) {
        this.show = false
        this.$emit('input', this.show)
      }
    },
    handleClose() {
      this.show = false
      this.$emit('input', this.show)
    }
  },
  watch: {
    value(val) {
      this.show = val
    }
  }
}
</script>



<style>
.h-dialog {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.h-dialog-mask {
  background-color: rgba(0,0,0,0.6);
  width: 100%;
  height: 100vh;
}
.h-close {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  font-size: 28rpx;
  color: #010101;
  border-radius: 50%;
  background-color: #fff;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  z-index: 9999;
}
.h-dialog-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 350rpx;
}
</style>
